<!-- create begin -->
<div class=" create">

    <!-- 表单 -->
    <section class="panel-body">
        <form role="form" class="form-select">

            <div class="form-group col-sm-4">
                <span>产品编号</span>
                <input type="text" class="form-control" placeholder="产品编号" name="sn" value="">
            </div>

            <div class="form-group col-sm-4">
                <span>内部编号</span>
                <input type="text" class="form-control" placeholder="内部编号" name="unique_sn">
            </div>

            <div class="form-group col-sm-4">
                <span>名称</span>
                <input type="text" class="form-control" placeholder="名称" name="name">
            </div>

            <div class="form-group col-sm-4">
                <span>产品分类</span>
                <select name="cate" class="form-control comboSelect">
                    <option value="0">顶级</option>
                    {volist name="list" id="vo"}
                        {if($vo.level<2) }
                            <option value="{$vo.id}">{:$vo.level>0? '|' : null }{:str_repeat('--',$vo.level)}{$vo.name}
                            </option>
                        {else /} {/if}

                    {/volist}
                </select>
            </div>

            <div class="form-group col-sm-4">
                <span>品牌</span>
                <select name="brand" class="form-control comboSelect">
                    <option value="" >全部</option>
                    {volist name="brand" id="vo"}
                        <option value="{$vo.id}" >{$vo.name}</option>
                    {/volist}
                </select>
            </div>

            <div class="form-group col-sm-4">
                <span>型号</span>
                <input type="text" class="form-control" placeholder="型号" name="model">
            </div>
            
<!-- 
            <div class="form-group col-sm-4">
                <span>颜色</span>
                <select name="color" class="form-control comboSelect">
                    <option value="" >全部</option>
                    {volist name="color" id="vo"}
                        <option value="{$vo.id}" >{$vo.name}</option>
                    {/volist}
                </select>
            </div> 
-->

            <div class="form-group col-sm-12 product-search">
                <button type="button" class="btn btn-sm btn btn-primary" @click="search"> 搜索 </button>
            </div>

            <!-- select table -->
            <div class="form-group col-sm-12" style="min-height:200px;">           
                <table class="table table-bordered table-striped table-condensed no-margin col-sm-12" >
                    <thead>
                        <tr>
                            <th>
                            </th>
                            <th v-for="item in data" v-text="item"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,k) in list">
                            <td>
                                <button type="button" class="btn btn-xs btn btn-primary" @click="addLine(k)"> 选择 </button>
                            </td>
                            <td> 
                                <span v-text="item.name"></span>
                            </td>
                            <td> 
                                <span v-text="item.model"></span>
                            </td>
                            <td> 
                                <span v-text="item.spec"></span>
                            </td>
                            <td> 
                                <span v-text="item.color.name"></span>
                            </td>
                            <td> 
                                <input type="text" class="form-control" v-model="item.num" style="height:25px;width:60px;padding:3px;" >
                            </td>
                            <td> 
                                <span v-text="item.unit.name"></span>
                            </td>
                            <td> 
                                <span v-text="item.price"></span>
                            </td>

                        </tr>
                    </tbody>
                </table>
            </div>



        </form>
    </section>

</div>
<!-- create end-->

<script>
// seajs
seajs.use(['vendor/comboSelect/jquery.combo.select'], function () {

    var data = {
        name: '名称',
        model: '型号',
        spec: '规格',
        color: '颜色',
        num: '数量',
        unit: '单位',
        price: '单价',
    };

    var select = new Vue({
        el: '.form-select',
        data: {
                data: data,
            list: []
        },
        mounted: function () {
            $('.comboSelect').comboSelect();
        },
        methods: {
            search: function () {
                var _this = this;
                var data = $(".form-select").serializeArray();
                var param = {data: arrayToJson(data)};

                $.get("{:url('product/index')}",param,function(data) {
                    _this.list = data.rows;
                });

            },
            addLine: function(index){
                var num = parseInt( this.list[index].num );
                // console.log(num);
                if( num >0 && !isNaN(num) ){
                    this.list[index].count = this.list[index].num * this.list[index].price;
                    this.unique_list(index);
                    layer.close(layer_index);
                }else{
                    layer.msg('请填写数量');
                }  

            },
            unique_list: function(index){
                // console.log( this.list[index] );
                list.push( this.list[index] );
                // list = uniq(list);
            }

        }

    });

    // 去重
    function uniq(array){
        var temp = {}, r = [], len = array.length, val, type;
        for (var i = 0; i < len; i++) {
            val = array[i];
            type = typeof val;
            if (!temp[val]) {
                temp[val] = [type];
                r.push(val);
            } else if (temp[val].indexOf(type) < 0) {
                temp[val].push(type);
                r.push(val);
            }
        }
        return r;
    }


});
</script>